<template>
  <a-table-column v-for="item in columns" :key="item.title" v-bind="item">
    <template #title>
      <div class="arco-table-cell-align-center flex items-center" :style="{ width: item.isParent ? item.width + 'px' : 'auto' }">
        <div :style="{ ...item.headerStyle }" class="flex-1">
          <div>{{ item.title }}</div>
          <div>{{ item.desc }}</div>
        </div>
        <table-tooltip v-if="item.tooltipList" v-bind="{ title: item.title, tooltipList: item.tooltipList }" />
        <a-link v-if="item.isToggle" @click="handleToggle(item)">
          {{ item.toggleStatus ? '收起' : '展开' }}
          <component style="margin-left: 8px" :is="`icon-${item.toggleStatus ? 'up' : 'down'}`" />
        </a-link>
      </div>
    </template>
    <template #cell="{ record, column, rowIndex }">
      <template v-if="item.slotName">
        <slot :name="item.slotName" v-bind="{ record, column, rowIndex, tableIndex }"></slot>
      </template>
      <div v-else class="flex items-center">
        <tablePrice v-if="!item.isString" :value="createSmartObject(record)[column.dataIndex]" :config="item" :record="record" />
        <div v-else>{{ createSmartObject(record)[column.dataIndex] }}</div>
      </div>
    </template>
    <template v-if="item?.isChildShow">
      <tableColumn
        v-if="item?.children?.length && (item?.isToggle ? !item.toggleStatus : true)"
        :columns="[item.children[item.children.length - 1]]"
        :key="item.dataIndex"
        v-bind="item"
        class="child-column"
      >
        <template v-for="(_, slotName) in slots" #[slotName]="slotData" :key="slotName">
          <slot :name="slotName" v-bind="slotData"></slot>
        </template>
      </tableColumn>
    </template>
    <template v-else>
      <tableColumn
        v-if="item?.children?.length && (item?.isToggle ? item.toggleStatus : true)"
        :columns="item.children"
        :key="item.dataIndex"
        v-bind="item"
        class="child-column"
      >
        <template v-for="(_, slotName) in slots" #[slotName]="slotData" :key="slotName">
          <slot :name="slotName" v-bind="slotData"></slot>
        </template>
      </tableColumn>
    </template>
  </a-table-column>
</template>
<script setup>
  import tableColumn from './table-column.vue'
  import tableTooltip from './table-tooltip.vue'
  import tablePrice from './table-price.vue'

  import { useSlots } from 'vue'

  const props = defineProps({
    columns: Array,
  })

  const slots = useSlots()

  const handleToggle = (item) => {
    if (item.toggleStatus != undefined) {
      item.toggleStatus = !item.toggleStatus
    }
    if (item.isChildShow != undefined) {
      item.isChildShow = !item.isChildShow
    }
  }

  const createSmartObject = (obj) => {
    // 确保传入的是一个对象
    if (typeof obj !== 'object' || obj === null) {
      throw new TypeError('传入的参数必须是一个对象')
    }

    // 创建handler对象
    const handler = {
      get(target, prop) {
        // 如果是普通属性访问（如obj.a或obj['a']）
        if (prop in target) {
          return target[prop]
        }

        // 如果是点表示法的属性访问（如obj['b.c']）
        if (typeof prop === 'string' && prop.includes('.')) {
          const keys = prop.split('.')
          let result = target

          for (const key of keys) {
            if (result === undefined || result === null) {
              return undefined
            }
            result = result[key]
          }

          return result
        }

        return undefined
      },
    }

    // 返回proxy对象
    return new Proxy(obj, handler)
  }
</script>

<style scoped lang="less">
  :deep(.parent-column) {
    width: auto !important;
    min-width: 120px !important; /* 设置一个最小宽度 */
  }

  :deep(.parent-column-title) {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
  }

  :deep(.child-column) {
    width: auto;
  }
</style>
